<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>从改革开放到现代化强国｜时间轴拖拽练习</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <style>
    /* ======== 全局样式 ======== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "PingFang SC", "Microsoft YaHei", sans-serif;
      background: radial-gradient(circle at top, #ffe5d1, #f4f5fb 40%, #e6ecff);
      color: #222;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .app {
      width: 100%;
      max-width: 1100px;
      background: rgba(255, 255, 255, 0.98);
      border-radius: 20px;
      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
      padding: 20px 24px 26px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      overflow: hidden;
    }

    .app::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 5% 0, rgba(255, 198, 139, 0.35), transparent 55%),
                  radial-gradient(circle at 97% 0, rgba(255, 102, 102, 0.3), transparent 55%);
      pointer-events: none;
      opacity: 0.7;
      z-index: -1;
    }

    header {
      display: flex;
      flex-direction: column;
      gap: 8px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      padding-bottom: 10px;
    }

    header .title-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
    }

    h1 {
      font-size: 22px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    h1 span.logo-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, #ff6b4a, #ffb330);
      box-shadow: 0 0 0 3px rgba(255, 138, 76, 0.45);
    }

    .badge {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(255, 158, 93, 0.15);
      color: #c35610;
      border: 1px solid rgba(255, 158, 93, 0.6);
    }

    header p {
      font-size: 13px;
      color: #555;
    }

    main {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* ======== 时间轴区域 ======== */
    .timeline-wrapper {
      background: linear-gradient(135deg, rgba(255, 245, 233, 0.9), rgba(255, 255, 255, 0.9));
      border-radius: 16px;
      padding: 12px 16px 14px;
      border: 1px solid rgba(255, 163, 70, 0.25);
      position: relative;
      overflow: hidden;
    }

    .timeline-wrapper::after {
      content: "从 1978 年到本世纪中叶";
      position: absolute;
      right: 12px;
      top: 10px;
      font-size: 11px;
      color: rgba(0, 0, 0, 0.25);
    }

    .timeline-label {
      font-size: 13px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
      color: #8a4b12;
    }

    .timeline-label-icon {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 2px solid #ff8a3b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      background: #fff7ed;
    }

    .timeline {
      position: relative;
      margin-top: 6px;
      padding: 20px 6px 10px;
    }

    .timeline-line {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 4px;
      background: linear-gradient(90deg, #ffaf6f, #ff6b6b, #ffcc3f);
      transform: translateY(-50%);
      border-radius: 999px;
      box-shadow: 0 3px 9px rgba(255, 112, 58, 0.4);
    }

    .timeline-nodes {
      display: flex;
      justify-content: space-between;
      gap: 4px;
      position: relative;
      z-index: 1;
    }

    .timeline-node {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .node-dot {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 3px solid #fff;
      background: #ff7c42;
      box-shadow: 0 0 0 3px rgba(255, 119, 66, 0.45);
      position: relative;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .timeline-node.completed .node-dot {
      background: #12b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5);
      transform: scale(1.05);
    }

    .node-dot::after {
      content: "";
      position: absolute;
      inset: 3px;
      border-radius: inherit;
      border: 2px solid rgba(255, 255, 255, 0.8);
    }

    .node-year {
      font-size: 12px;
      font-weight: 600;
      color: #7a3111;
      text-align: center;
      line-height: 1.3;
    }

    .dropzone {
      margin-top: 6px;
      width: 100%;
      max-width: 140px;
      min-height: 42px;
      border-radius: 12px;
      border: 2px dashed rgba(255, 138, 76, 0.6);
      background: rgba(255, 252, 245, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
      transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease,
        transform 0.16s ease;
      font-size: 11px;
      color: rgba(134, 73, 19, 0.75);
      text-align: center;
    }

    .dropzone.active {
      border-style: solid;
      border-color: #f97316;
      background: #fff7ed;
      box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.35);
      transform: translateY(-3px);
    }

    .dropzone.correct {
      border-style: solid;
      border-color: #10b981;
      background: #ecfdf5;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
    }

    /* ======== 卡片区域 ======== */
    .cards-section {
      margin-top: 2px;
      border-radius: 14px;
      background: rgba(248, 250, 252, 0.9);
      padding: 10px 14px 12px;
      border: 1px solid rgba(148, 163, 184, 0.3);
    }

    .cards-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      gap: 8px;
    }

    .cards-title {
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .cards-title span.icon {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      background: rgba(59, 130, 246, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: #2563eb;
    }

    .score-pill {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(16, 185, 129, 0.08);
      border: 1px solid rgba(16, 185, 129, 0.45);
      color: #047857;
      white-space: nowrap;
    }

    .cards-tip {
      font-size: 12px;
      color: #64748b;
      margin-bottom: 8px;
    }

    .cards-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      min-height: 52px;
    }

    .card {
      flex: 0 0 calc(33.333% - 7px);
      min-width: 120px;
      background: #ffffff;
      border-radius: 12px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
      border: 1px solid rgba(148, 163, 184, 0.45);
      cursor: grab;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      user-select: none;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
        background 0.18s ease;
      position: relative;
      background-image: linear-gradient(135deg, rgba(248, 250, 252, 0.5), rgba(239, 246, 255, 0.9));
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 1px solid rgba(255, 255, 255, 0.8);
      pointer-events: none;
    }

    .card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 22px rgba(15, 23, 42, 0.15);
      border-color: #2563eb;
    }

    .card.dragging {
      opacity: 0.9;
      cursor: grabbing;
      transform: scale(1.04);
      box-shadow: 0 16px 28px rgba(15, 23, 42, 0.22);
      border-color: #2563eb;
      z-index: 10;
    }

    .card.locked {
      cursor: default;
      box-shadow: 0 7px 14px rgba(16, 185, 129, 0.22);
      border-color: #059669;
      background-image: linear-gradient(135deg, #ecfdf5, #defce7);
    }

    /* ======== 提示区域 ======== */
    .hint-bar {
      margin-top: 4px;
      font-size: 12px;
      padding: 8px 10px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(241, 245, 249, 0.95);
      border: 1px dashed rgba(148, 163, 184, 0.75);
      color: #475569;
    }

    .hint-icon {
      width: 15px;
      height: 15px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
    }

    .hint-bar.success {
      background: rgba(220, 252, 231, 0.98);
      border-color: rgba(22, 163, 74, 0.7);
      color: #166534;
    }

    .hint-bar.error {
      background: rgba(254, 242, 242, 0.98);
      border-color: rgba(239, 68, 68, 0.8);
      color: #b91c1c;
    }

    /* ======== 结算弹层 ======== */
    .overlay {
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at top, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.8));
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }

    .overlay.hidden {
      display: none;
    }

    .overlay-card {
      background: #f9fafb;
      border-radius: 18px;
      padding: 20px 22px 18px;
      max-width: 420px;
      width: 90%;
      box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35);
      text-align: left;
      position: relative;
      overflow: hidden;
    }

    .overlay-card::before {
      content: "";
      position: absolute;
      inset: -40%;
      background:
        conic-gradient(from 220deg, rgba(74, 222, 128, 0.45), rgba(59, 130, 246, 0.35),
          rgba(251, 191, 36, 0.5), rgba(251, 113, 133, 0.55), rgba(74, 222, 128, 0.45));
      opacity: 0.28;
      z-index: -1;
      filter: blur(8px);
    }

    .overlay-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .overlay-title span.emoji {
      font-size: 20px;
    }

    .overlay-subtitle {
      font-size: 13px;
      color: #4b5563;
      margin-bottom: 8px;
    }

    .overlay-timeline-summary {
      margin: 8px 0 10px;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(148, 163, 184, 0.4);
      font-size: 12px;
      line-height: 1.52;
      max-height: 135px;
      overflow-y: auto;
    }

    .overlay-timeline-summary span.year {
      font-weight: 600;
      color: #b91c1c;
    }

    .overlay-timeline-summary span.keyword {
      font-weight: 600;
      color: #2563eb;
    }

    .overlay-actions {
      margin-top: 8px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    .btn {
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 13px;
      border: 1px solid transparent;
      background: #e5e7eb;
      color: #111827;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease,
        border-color 0.15s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    }

    .btn-primary {
      background: linear-gradient(135deg, #ef4444, #f97316);
      color: #fff;
      border-color: rgba(185, 28, 28, 0.9);
      box-shadow: 0 10px 26px rgba(248, 113, 113, 0.6);
    }

    .btn-primary:hover {
      background: linear-gradient(135deg, #dc2626, #ea580c);
    }

    .btn-secondary {
      background: rgba(248, 250, 252, 0.9);
      border-color: rgba(148, 163, 184, 0.85);
      color: #334155;
    }

    /* ======== 动画 keyframes ======== */
    @keyframes bounce {
      0% { transform: translateY(0) scale(1); }
      40% { transform: translateY(-6px) scale(1.03); }
      70% { transform: translateY(1px) scale(0.99); }
      100% { transform: translateY(0) scale(1); }
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-6px); }
      40% { transform: translateX(6px); }
      60% { transform: translateX(-4px); }
      80% { transform: translateX(4px); }
    }

    .animate-bounce {
      animation: bounce 0.45s ease-out;
    }

    .animate-shake {
      animation: shake 0.35s ease-in-out;
    }

    /* ======== 响应式 ======== */
    @media (max-width: 768px) {
      .app {
        padding: 16px 14px 18px;
        border-radius: 16px;
      }

      h1 {
        font-size: 18px;
      }

      .timeline {
        padding-inline: 0;
      }

      .dropzone {
        max-width: 120px;
      }

      .cards-list {
        gap: 8px;
      }

      .card {
        flex: 0 0 calc(50% - 6px);
        min-width: 118px;
      }
    }

    @media (max-width: 480px) {
      .timeline-wrapper {
        padding-inline: 10px;
      }

      .node-year {
        font-size: 11px;
      }

      .card {
        flex: 1 1 100%;
      }
    }
  </style>
</head>

<body>
  <div class="app">
    <header>
      <div class="title-row">
        <h1>
          <span class="logo-dot"></span>
          从改革开放到现代化强国 · 时间轴拖拽练习
        </h1>
        <span class="badge">历史 · 认识中国发展道路</span>
      </div>
      <p>请把下方的历史阶段卡片拖动到合适的时间节点上，完成中国发展“接力赛”。</p>
    </header>

    <main>
      <!-- 时间轴区域 -->
      <section class="timeline-wrapper">
        <div class="timeline-label">
          <div class="timeline-label-icon">轴</div>
          <span>时间从左到右依次推进：1978 年 → 80–90 年代 → 20 世纪末 → 2020 → 2035 → 本世纪中叶</span>
        </div>

        <div class="timeline">
          <div class="timeline-line"></div>

          <div class="timeline-nodes">
            <!-- 1978 改革开放 -->
            <div class="timeline-node" data-slot="reform">
              <div class="node-year">1978 年</div>
              <div class="node-dot"></div>
              <div class="dropzone" data-accept="reform">
                拖入对应阶段
              </div>
            </div>

            <!-- 80–90 解决温饱 -->
            <div class="timeline-node" data-slot="wenbao">
              <div class="node-year">20 世纪<br>80–90 年代</div>
              <div class="node-dot"></div>
              <div class="dropzone" data-accept="wenbao">
                拖入对应阶段
              </div>
            </div>

            <!-- 20 世纪末 总体小康 -->
            <div class="timeline-node" data-slot="zongti">
              <div class="node-year">20 世纪末</div>
              <div class="node-dot"></div>
              <div class="dropzone" data-accept="zongti">
                拖入对应阶段
              </div>
            </div>

            <!-- 2020 全面小康 -->
            <div class="timeline-node" data-slot="quanmian">
              <div class="node-year">2020 年</div>
              <div class="node-dot"></div>
              <div class="dropzone" data-accept="quanmian">
                拖入对应阶段
              </div>
            </div>

            <!-- 2035 基本实现现代化 -->
            <div class="timeline-node" data-slot="2035">
              <div class="node-year">2035 年</div>
              <div class="node-dot"></div>
              <div class="dropzone" data-accept="2035">
                拖入对应阶段
              </div>
            </div>

            <!-- 本世纪中叶 现代化强国 -->
            <div class="timeline-node" data-slot="2050">
              <div class="node-year">本世纪中叶</div>
              <div class="node-dot"></div>
              <div class="dropzone" data-accept="2050">
                拖入对应阶段
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 卡片区域 -->
      <section class="cards-section">
        <div class="cards-header">
          <div class="cards-title">
            <span class="icon">拖</span>
            <span>将卡片拖到对应时间节点</span>
          </div>
          <div class="score-pill" id="scorePill">已放对 0 / 6</div>
        </div>
        <p class="cards-tip">提示：先观察时间轴的时间顺序，再决定把哪张卡片拖到哪里哦。</p>

        <div class="cards-list" id="cardPool">
          <div class="card" draggable="true" data-id="reform">改革开放</div>
          <div class="card" draggable="true" data-id="wenbao">解决温饱</div>
          <div class="card" draggable="true" data-id="zongti">总体小康</div>
          <div class="card" draggable="true" data-id="quanmian">全面小康</div>
          <div class="card" draggable="true" data-id="2035">基本实现现代化</div>
          <div class="card" draggable="true" data-id="2050">现代化强国</div>
        </div>
      </section>

      <!-- 提示条 -->
      <div class="hint-bar" id="hintBar">
        <div class="hint-icon">💡</div>
        <span id="hintText">小提示：先试着把“改革开放”拖到 1978 年。</span>
      </div>
    </main>
  </div>

  <!-- 结算弹层 -->
  <div class="overlay hidden" id="overlay">
    <div class="overlay-card">
      <div class="overlay-title">
        <span class="emoji">🎉</span>
        <span>时间接力完成！</span>
      </div>
      <div class="overlay-subtitle">
        你已经按照时间顺序，把从改革开放到现代化强国的关键阶段全部摆放正确。
      </div>

      <div class="overlay-timeline-summary">
        <p><strong>再按顺序回顾一遍：</strong></p>
        <p>
          <span class="year">1978 年</span> —— <span class="keyword">改革开放</span> 拉开序幕，中国进入伟大历史转折的新时期。<br>
          <span class="year">20 世纪 80–90 年代</span> —— 通过改革发展，人民生活水平显著提高，<span class="keyword">基本解决温饱</span>。<br>
          <span class="year">20 世纪末</span> —— 全国人民生活水平<span class="keyword">总体达到小康</span>。<br>
          <span class="year">2020 年</span> —— 如期<span class="keyword">全面建成小康社会</span>，实现第一个百年奋斗目标。<br>
          <span class="year">2035 年</span> —— 远景目标是<span class="keyword">基本实现社会主义现代化</span>。<br>
          <span class="year">本世纪中叶</span> —— 在此基础上，建成<span class="keyword">富强民主文明和谐美丽的社会主义现代化强国</span>。
        </p>
      </div>

      <div class="overlay-actions">
        <button class="btn btn-secondary" id="btnClose">
          好的，我再看一遍
        </button>
        <button class="btn btn-primary" id="btnRestart">
          再做一次练习 🔁
        </button>
      </div>
    </div>
  </div>

  <script>
    // ================== 数据 & DOM 获取 ==================
    const cards = document.querySelectorAll(".card");
    const dropzones = document.querySelectorAll(".dropzone");
    const nodes = document.querySelectorAll(".timeline-node");
    const hintBar = document.getElementById("hintBar");
    const hintText = document.getElementById("hintText");
    const scorePill = document.getElementById("scorePill");
    const cardPool = document.getElementById("cardPool");
    const overlay = document.getElementById("overlay");
    const btnClose = document.getElementById("btnClose");
    const btnRestart = document.getElementById("btnRestart");

    const TOTAL = 6;
    let correctCount = 0;

    // 每个阶段的知识点，用于正确时提示
    const KNOWLEDGE = {
      reform: "1978 年，十一届三中全会召开，拉开了我国改革开放的序幕。",
      wenbao: "20 世纪 80–90 年代，通过改革发展，我国基本解决了人民的温饱问题。",
      zongti: "20 世纪末，我国人民生活水平总体达到小康，生活明显改善。",
      quanmian: "到 2020 年，我国如期全面建成小康社会，历史性地消除了绝对贫困。",
      "2035": "到 2035 年，我国要基本实现社会主义现代化，人民生活更加殷实。",
      "2050": "到本世纪中叶，我国将建成富强民主文明和谐美丽的社会主义现代化强国。"
    };

    // 错误提示的简短引导
    const ERROR_HINT = {
      reform: "提示：改革开放与 1978 年的十一届三中全会有关。",
      wenbao: "提示：解决温饱大致发生在 20 世纪 80–90 年代。",
      zongti: "提示：总体小康是在 20 世纪末前后实现的。",
      quanmian: "提示：全面小康与 2020 年这个重要年份关联很大。",
      "2035": "提示：‘基本实现现代化’对应的时间是 2035 年。",
      "2050": "提示：‘现代化强国’一般对应说的是本世纪中叶。"
    };

    // ================== 工具函数 ==================
    function setHint(type, text) {
      hintBar.classList.remove("success", "error");
      if (type === "success") {
        hintBar.classList.add("success");
      } else if (type === "error") {
        hintBar.classList.add("error");
      }
      hintText.textContent = text;
    }

    function updateScore() {
      scorePill.textContent = `已放对 ${correctCount} / ${TOTAL}`;
    }

    // 随机打乱卡片顺序（Fisher-Yates 洗牌）
    function shuffleCards() {
      const cardsArray = Array.from(cardPool.querySelectorAll(".card"));
      for (let i = cardsArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [cardsArray[i], cardsArray[j]] = [cardsArray[j], cardsArray[i]];
      }
      cardsArray.forEach((card) => cardPool.appendChild(card));
    }

    function resetAll() {
      correctCount = 0;
      updateScore();
      setHint("normal", "练习重新开始啦：先试着把“改革开放”拖到 1978 年。");

      // 清空所有 dropzone 里的卡片，恢复样式
      dropzones.forEach((zone) => {
        zone.classList.remove("active", "correct");
        zone.textContent = "拖入对应阶段";
      });

      nodes.forEach((node) => {
        node.classList.remove("completed");
      });

      // 将卡片全部放回池子，恢复可拖拽
      cards.forEach((card) => {
        card.classList.remove("locked");
        card.removeAttribute("data-placed");
        card.setAttribute("draggable", "true");
        cardPool.appendChild(card);
      });

      // 重新随机打乱卡片
      shuffleCards();
    }

    function showOverlay() {
      overlay.classList.remove("hidden");
    }

    function hideOverlay() {
      overlay.classList.add("hidden");
    }

    function checkComplete() {
      if (correctCount === TOTAL) {
        // 延迟一点点，让最后一次动画结束再弹出总结
        setTimeout(showOverlay, 480);
      }
    }

    // ================== 拖拽逻辑 ==================
    cards.forEach((card) => {
      card.addEventListener("dragstart", (e) => {
        if (card.classList.contains("locked")) {
          e.preventDefault();
          return;
        }

        card.classList.add("dragging");
        e.dataTransfer.effectAllowed = "move";
        e.dataTransfer.setData("text/plain", card.dataset.id);
      });

      card.addEventListener("dragend", () => {
        card.classList.remove("dragging");
        dropzones.forEach((zone) => zone.classList.remove("active"));
      });
    });

    dropzones.forEach((zone) => {
      zone.addEventListener("dragover", (e) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = "move";
        if (!zone.classList.contains("correct")) {
          zone.classList.add("active");
        }
      });

      zone.addEventListener("dragleave", () => {
        zone.classList.remove("active");
      });

      zone.addEventListener("drop", (e) => {
        e.preventDefault();
        zone.classList.remove("active");

        const cardId = e.dataTransfer.getData("text/plain");
        const card = document.querySelector(`.card[data-id="${cardId}"]`);
        if (!card) return;

        const acceptId = zone.dataset.accept;

        // 已经正确放置过的节点，不再接受新的卡片
        if (zone.classList.contains("correct")) {
          setHint(
            "error",
            "这个时间节点已经放好了对应阶段，可以换一个空节点试试。"
          );
          return;
        }

        // 卡片如果已经固定在某处，也不再拖动
        if (card.classList.contains("locked")) {
          setHint("error", "这张卡片已经放对并锁定啦，不需要再拖动。");
          return;
        }

        // 判断是否正确
        if (cardId === acceptId) {
          handleCorrectDrop(card, zone, cardId);
        } else {
          handleWrongDrop(card, cardId);
        }
      });
    });

    function handleCorrectDrop(card, zone, cardId) {
      // 将卡片放到节点内
      zone.innerHTML = "";
      zone.appendChild(card);
      zone.classList.add("correct");
      card.classList.add("locked", "animate-bounce");
      card.setAttribute("data-placed", "true");
      card.setAttribute("draggable", "false");

      // 高亮对应的时间节点圆点
      const node = zone.closest(".timeline-node");
      if (node) {
        node.classList.add("completed");
      }

      // 更新计数和提示
      correctCount++;
      updateScore();
      const text = KNOWLEDGE[cardId] || "这一阶段是中国发展过程中的重要一步。";
      setHint("success", `✅ 正确：${text}`);

      // 清除动画类（方便下一次重新开始时能再次触发）
      setTimeout(() => {
        card.classList.remove("animate-bounce");
      }, 500);

      checkComplete();
    }

    function handleWrongDrop(card, cardId) {
      // 回到卡片池
      cardPool.appendChild(card);

      // 错误动画
      card.classList.add("animate-shake");
      setTimeout(() => {
        card.classList.remove("animate-shake");
      }, 400);

      const text =
        ERROR_HINT[cardId] ||
        `再想想：${card.textContent} 大约发生在什么时期呢？`;
      setHint("error", text);
    }

    // ================== 按钮事件 ==================
    btnClose.addEventListener("click", hideOverlay);

    btnRestart.addEventListener("click", () => {
      hideOverlay();
      resetAll();
    });

    // 初始提示 & 初始随机
    updateScore();
    shuffleCards();
  </script>
    
</body>
</html>
